<template>
<div class="ui form">
	<tFields @onsubmit="onsubmit" @oncancel="oncancel" @onclick="onclick" @onchange="onchange" :data="[fileds[0],fileds[1]]" :nosubmit="nosubmit"></tFields>
    <!-- <br> 退改规则：
    <button class="ui button " @click='editRefundRoles'>设置</button> -->
    <div class="refund-roules-detail" v-if='productData.useRefoundRoles'>
        <p v-if='productData.refund_time'>出行日期{{productData.refund_time[0]?`前${productData.refund_time[0]}天`:'当天'}}的{{productData.refund_time[1]}}时{{productData.refund_time[2]}}分</p>
        <p v-if='productData.refund_fee_per&&productData.refund_fee_extra'>手续费：{{productData.refund_fee_per}}%+{{productData.refund_fee_extra}}元<span class='redMessage'><i class="warning circle icon"></i>若商品没有出行时间则即时收取手续费</span></p>
        <p >生效时间：<span v-if='productData.effect_time'>{{productData.effect_time}}</span>
            <span v-else>立即</span>
        </p>
    </div>
	<tFields @onsubmit="onsubmit" @oncancel="oncancel" @onclick="onclick" @onchange="onchange" :data="[fileds[2],fileds[3]]" :nosubmit="nosubmit"></tFields>
    <!-- <refundRulesPop :active='refundRulesPopShow' :productData='productData' @onhide='refundRulesPopShow=false' @rulesSubmit='rulesSubmit'></refundRulesPop> -->
</div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import refundRulesPop from './refundRulesPop'
import tFields from 'components/tunit/tFields'
export default {
    data() {
        return {
            val: null,
            nosubmit: true,
            refundRulesPopShow: false,
            productData: {
                useRefoundRoles: false,
                snotice: '',
				srefund:'',
				sreminder:'',
				scontent:'',
                refund_fee_per:0,
                refund_fee_extra:0,
                refund_time:[0,0,0],
                effect_time: '',
            },
            vo: {}
        }
    },
    components: {
        tFields,
        refundRulesPop
    },
    computed: {
        fileds() {
            let data = [{
                label: "预定规则",
                show_type: "textarea",
                name: "snotice",
            },
			{
				label: "退改规则",
				show_type: "textarea",
				name: "srefund",
			},
			{
                label: "使用说明",
                show_type: "textarea",
                name: "scontent",
            }, {
                label: "温馨提示",
                show_type: "textarea",
                name: "sreminder",
            }];
            data.forEach(item => {
                item.value = this.productData[item.name]
            });
            return data
        }
    },
    watch: {
        productData: {
            handler() {
                this.$emit("onchange", {
                    name: 3,
                    data: this.productData
                });
            },
            deep: true
        }
    },
    methods: {
        editRefundRoles() {
            this.refundRulesPopShow = true;
        },

        rulesSubmit(data) {
            this.productData.useRefoundRoles = true;
            this.productData = { ...this.productData,
                ...data
            };
        },
        onchange({
            name,
            value
        }) {
            this.productData[name] = value;
        },
        oncancel() {},
        onsubmit() {},
        onclick(btn) {}
    },
    props: {
        params: {
            type: Object,
            default: function() {
                return {}
            }
        }
    },
    created() {
        if (this.params.data[3]) {
            this.productData = { ...this.productData,
                ...this.params.data[3]
            }
        } else {
            this.$emit("onchange", {
                name: 3,
                data: this.productData
            });
        }
    },
    mounted() {

    }
}
</script>
<style rel="stylesheet/less" scoped lang="less">
@import "../../../common/style/mixin";
.redMessage {
    color: red;
    margin-left: 5px;
}
.refund-roules-detail {
    color: rgb(140,140,140);
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
    p {
        margin-bottom: 5px;
    }
}
</style>
